<template>
  <el-dialog :title="getTitle('dialog')" :visible.sync="dialogVisible" width="930px" :before-close="handleClose" custom-class="dialog">
    <div v-loading="loading" class="list">
      <div class="contain-left">
        <div class="contain-left-header">
          <div class="title">{{ getTitle('select') }}</div>
          <div class="select-btn" @click="addSelectedFunc">全部选择</div>
        </div>
        <ul v-if="detaledFunData.length" class="func-list">
          <li v-for="item in detaledFunData" :key="item.id" @click="selectFunc(item)">
            <div>
              <div class="func-list-title">{{ getName }}</div>
              <div>
                <span v-if="activeName === 'property'" class="dpid">DP ID：{{ item.id }}</span>
                <span v-if="activeName === 'event'" class="dpid">EID：{{ item.eid }}</span>
                <span v-if="activeName === 'action'" class="dpid">AID：{{ item.aid }}</span>
                <span v-if="activeName !== 'property'">标识符：{{ item.id }}</span>
              </div>
              <div class="desc">备注：{{ item.description || '-' }}</div>
            </div>
            <i class="iconfont icon-xuanzegongneng"></i>
          </li>
        </ul>
        <div v-else class="no-data">无选择功能</div>
      </div>
      <div class="selected-right">
        <div class="selected-right-header">
          <div class="title">{{ getTitle('selected') }}</div>
          <div class="delete-btn" @click="deteleAllSelectedFunc">
            全部清除
          </div>
        </div>
        <ul class="selected-func-list">
          <li v-for="item in selectedFuncData" :key="item.id">
            <div>
              <div class="func-list-title">{{ getName }}</div>
              <div>
                <span v-if="activeName === 'property'" class="dpid">DP ID：{{ item.id }}</span>
                <span v-if="activeName === 'event'" class="dpid">EID：{{ item.eid }}</span>
                <span v-if="activeName === 'action'" class="dpid">AID：{{ item.aid }}</span>
                <span class="">标识符：{{ item.id }}</span>
              </div>
              <div class="desc">备注：{{ item.description || '-' }}</div>
            </div>
            <i class="iconfont icon-tianjiagongneng-shanchu" @click="deteleSelectFunc(item)"></i>
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="14" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="14" :disabled="!selectedFuncData.length" @click="onsubmit">确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  addProperties,
  getDeletedProperties
} from "@/api/product/product-details"
export default {
  name: 'addDialog',
  props: {
    activeName: {
      type: String,
      default: 'property'
    }
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      detaledFunData: [], // 删除后的功能列表数据
      selectedFuncData: [], // 已选功能数据
      productId: '' // 产品id
    }
  },
  computed: {
    getTitle() { // 区分 属性 事件 动作标题
      const titles = {
        dialog: {
          'property': '添加属性',
          'event': '添加事件',
          'action': '添加动作'
        },
        select: {
          'property': '选择属性',
          'event': '选择事件',
          'action': '选择动作'
        },
        selected: {
          'property': '已选属性',
          'event': '已选事件',
          'action': '已选动作'
        }
      }
      return type => {
        return titles[type][this.activeName] || ''
      }
    },
    getName() {
      const name = {
        'property': '属性名称',
        'event': '事件名称',
        'action': '动作名称'
      }
      return name[this.activeName] || ''
    }
  },
  created() {
    this.productId = this.$route.query.productId
  },
  methods: {
    // 添加数据列表
    getAddFuncList() {
      this.loading = true
      const params = {
        productId: this.productId
      }
      getDeletedProperties(params)
        .then((res) => {
          if (this.activeName === 'property') {
            this.detaledFunData = res.data.data.properties
          } else if (this.activeName === 'event') {
            this.detaledFunData = res.data.data.events
          } else if (this.activeName === 'action') {
            this.detaledFunData = res.data.data.actions
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        }).finally(() => {
          this.loading = false
        })
    },
    // 选择功能添加单个数据
    selectFunc(item) {
      const isIdExist = this.selectedFuncData.some(
        (data) => data.id === item.id
      )
      // 添加新数据（如果id不存在）
      if (!isIdExist) {
        this.selectedFuncData.push(item)
      }
      this.detaledFunData = this.detaledFunData.filter((data) => {
        return data.id !== item.id
      })
    },
    // 选择功能全部数据
    addSelectedFunc() {
      if (this.detaledFunData.length) {
        this.detaledFunData.map((item) => {
          this.selectedFuncData.push(item)
        })
        this.detaledFunData = []
      }
    },
    // 删除已选功能数据
    deteleAllSelectedFunc() {
      if (this.selectedFuncData.length) {
        this.selectedFuncData.map((item) => {
          this.detaledFunData.push(item)
        })
        this.selectedFuncData = []
      }
    },
    // 删除右侧已选功能数据
    deteleSelectFunc(item) {
      this.selectedFuncData = this.selectedFuncData.filter(
        (data) => data.id !== item.id
      )

      const isIdExist = this.detaledFunData.some(
        (data) => data.id === item.id
      )
      // 添加新数据（如果id不存在）
      if (!isIdExist) {
        this.detaledFunData.push(item)
      }
    },
    /**
     * 提交添加功能数据
     */
    onsubmit() {
      const idsArr = []
      this.selectedFuncData.map((item) => {
        idsArr.push(item.id)
      })
      const params = {
        productId: this.productId,
        ids: idsArr,
        tslType: this.activeName
      }
      addProperties(params)
        .then((res) => {
          this.$message({
            type: "success",
            message: "添加成功!"
          })
          // 使用 this.$parent 调用父组件的方法
          this.$parent.handleClick()
          this.dialogVisible = false
          this.selectedFuncData = []
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 关闭添加功能弹窗
    handleClose() {
      this.dialogVisible = false
      this.selectedFuncData = []
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: space-between;

  .contain-left,
  .selected-right {
    width: 438px;
    height: 531px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #dedede;
    overflow: hidden;
    overflow-y: auto;

    .contain-left-header,
    .selected-right-header {
      height: 48px;
      background: #e9eaeb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;

      .title {
        font-weight: 600;
        color: #252525;
      }

      .select-btn,
      .delete-btn {
        font-weight: 400;
        color: #2b6ff8;
        cursor: pointer;
      }
    }

    .func-list,
    .selected-func-list {
      font-size: 12px;
      font-weight: 400;
      color: #808080;
      padding: 0;
      margin: 0;

      li {
        border-bottom: 1px solid #dedede;
        padding: 10px 16px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        .iconfont {
          cursor: pointer;
        }
      }

      .func-list-title {
        font-weight: 400;
        color: #252525;
        height: 20px;
        line-height: 20px;
      }

      .dpid {
        margin-right: 26px;
      }

      .desc {
        font-size: 12px;
        font-weight: 400;
        height: 17px;
        height: 17px;
      }
    }

    .no-data {
      text-align: center;
      margin-top: 200px;
      color: #252525;
    }
  }
}
</style>
